import { createMemo, mergeProps, splitProps, type JSX } from "solid-js";
import { classList } from "solid-js/web";

type BootstrapIconProps = {
  icon: string;
} & JSX.HTMLAttributes<HTMLElement>;

const BootstrapIcon = (props: BootstrapIconProps) => {
  const [someProps, restProps] = splitProps(props, ["icon", "class"]);

  const iconClass = createMemo(() => {
    return `bi bi-${someProps.icon} ${someProps.class ?? ''}`;
  });

  const mergedProps = mergeProps({class: iconClass()}, restProps);

  return <i {...mergedProps}></i>;
};

export default BootstrapIcon;
